<template>
    <view class="confirm-coupon-main">
        <view class="coupon-list" v-if="isCouponList">
            <view v-for="(item, index) in couponList" :key="index" @click="choose(index, item)">
                <Coupon :midWidth="450" :Data="item">
                    <template #right>
                        <view class="coupon-right">
                            <image
                                v-if="item.active"
                                class="img-icon"
                                :src="getImgOssUrl('/ui-prod-2.0.0/radio_active_icon_2.0.png')"></image>
                            <image
                                v-else
                                class="img-icon"
                                :src="getImgOssUrl('/ui-prod-2.0.0/radio_icon_2.0.png')"></image>
                        </view>
                    </template>
                </Coupon>
            </view>
            <view class="coupon-no" @click="chooseNo()">
                <image
                    v-if="isCoupon"
                    class="img-icon"
                    :src="getImgOssUrl('/ui-prod-2.0.0/radio_active_icon_2.0.png')"></image>
                <image v-else class="img-icon" :src="getImgOssUrl('/ui-prod-2.0.0/radio_icon_2.0.png')"></image>
                <view class="coupon-no-text">不使用优惠券</view>
            </view>
        </view>
        <view class="no-coupon-list" v-else>
            <image class="no-list-img" :src="getImgOssUrl('/ui-prod-2.0.0/close.png')"></image>
            <view class="no-list-text">您还没有可用优惠券</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { getImgOssUrl } from '@/commons/utils.js';
import router from '@/router';
import store from '@/store';
import Coupon from '@/components/coupon';

const goodsStore = store.useGoodsStore();

const isCoupon = ref(false);

const isCouponList = ref(true);

const couponList = reactive([]);

goodsStore.couponList.map(el => {
    couponList.push({
        active: el.active,
        couponType: el.customerCouponType,
        couponDiscount: el.customerCouponDiscountContent,
        couponDiscountMost: el.customerCouponDiscountMost || 0,
        couponTitle: el.customerCouponTitle,
        couponTimeStart: el.customerCouponExpireTimeStart.substr(0, 10),
        couponTimeEnd: el.customerCouponExpireTimeEnd.substr(0, 10),
        couponMatch: el.customerCouponMatch,
        couponDescription: el.customerCouponDescription,
        couponPrerequisites: el.customerCouponPrerequisites,
        couponPrerequisitesAdditional: el.customerCouponPrerequisitesAdditional
    });
});

if (!couponList.length) {
    isCouponList.value = false;
} else {
    isCouponList.value = true;
}

const choose = (index, item) => {
    if (item.active) {
        couponList[index].active = false;
        goodsStore.couponList[index].active = false;
    } else {
        couponList.map(el => (el.active = false));
        couponList[index].active = true;
        goodsStore.couponList.map(el => (el.active = false));
        goodsStore.couponList[index].active = true;
    }
    goodsStore.isCouponPage = true;
    router.back();
};

const chooseNo = () => {
    isCoupon.value = !isCoupon.value;
    couponList.map(el => (el.active = false));
    goodsStore.couponList.map(el => (el.active = false));
    goodsStore.isCouponPage = true;
    router.back();
};
</script>
<style lang="scss" scoped>
.confirm-coupon-main {
    background: #ffffff;
    height: 100%;
    .coupon-list {
        padding: 29rpx 29rpx 80rpx;
        background: #ffffff;
        .coupon-right {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .img-icon {
        width: 36rpx;
        height: 36rpx;
    }
    .coupon-no {
        display: flex;
        align-items: center;
        .coupon-no-text {
            margin-left: 22rpx;
            color: #333333;
            font-size: 25rpx;
            line-height: 36rpx;
        }
    }
    .no-coupon-list {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
        .no-list-img {
            width: 290rpx;
            height: 187rpx;
        }
        .no-list-text {
            padding-top: 29rpx;
            font-size: 29rpx;
            color: #333333;
            line-height: 40rpx;
        }
    }
}
</style>
